<template>
	<view>
		<!-- 支付设置 -->
		<view class="pay_view">
			<view>支付设置
				<span>（法定代表人、企业管理员不受限制）</span>
			</view>
			<!-- <uni-icons type="forward" size="14"></uni-icons> -->
		</view>
		<swiperTabHead :tabBars="tabList" :tabIndex="tabIndex" @tabtap="tabtap" class="swiper-tab"></swiperTabHead>
		
		<!-- 关闭支付额度 -->
	    <view v-if="tabIndex == 0">
			<view class="flex-card">
			<p class="title_row">
			<span>关闭支付额度</span>
			<switch color="#00a660" style="transform:scale(0.7)" :checked="systemSet.payLimitType == 2?true:false" 
			:disabled="!systemSet.payLimitType == 2" @change="switchChange(2)"/>
			</p>
			<p class="grid-integral" style="color: #000;margin-top: 10rpx;">温馨提示：</p>
			<p class="row_p">企业订单支付时，组织内所有员工需要由管理人员（如：法定代表人、账户管理员、公司财务）进行审批代支付！</p>
		    </view>
		    <!-- 指定代支付人员 -->
		    <p class="title_row" style="margin:0 20rpx;">
			<span>代支付人员</span>
			<button size="mini" @click="add" class="addBtn"><i class="iconfont">&#xe647;</i>添加</button>
			</p>
			<!-- 人员列表 -->
			<view v-if="payStaffList != null">
			<view class="flex-card" v-for="item,index in payStaffList" :key="index">
				<p class="grid-integral">名称：{{item.name}}</p>
				<p class="grid-integral">手机号：{{item.mobile}}</p>
				<p class="grid-integral">职位：
				<span v-if="!!item.staffPost">{{item.staffPost}}</span>
				<span v-else>--</span>
				</p>
				<p class="grid-integral">部门：{{item.deptName}}</p>
				<view class="title_row">
					<p class="grid-integral">角色：
					<span v-if="$store.getters.companyInfo.adminId == item.id && $store.getters.companyInfo.legalPersonId == item.id">
					                  法定代表人,企业管理员,{{ item.roleName.replace("普通员工", "") }}
					                </span>
					                  <span v-else-if="$store.getters.companyInfo.legalPersonId == item.id">
					                    法定代表人,{{ item.roleName.replace("普通员工", "") }}
					                  </span>
					                  <span v-else-if="$store.getters.companyInfo.adminId == item.id">
					                    企业管理员,{{ item.roleName.replace("普通员工", "") }}
					                  </span>
					                  <span v-else>{{ item.roleName }}</span>
					</p>
					<button size="mini" class="delete_btn" @click="deleteByStaffId(item)"
					 v-if="$store.getters.companyInfo.legalPersonId != item.id && $store.getters.companyInfo.adminId != item.id">删除</button>
				</view>
			</view>
		</view>
			<luanqingEmpty :show="true" text="没有更多数据啦" v-else />
	    </view>
		
		<!-- 不限支付额度 -->
		<view v-if="tabIndex == 1">
			<!-- 不限支付额度 -->
			<view class="flex-card">
			<p class="title_row">
			<span>不限支付额度</span>
			<switch color="#00a660" style="transform:scale(0.7)" :checked="systemSet.payLimitType == 0?true:false" 
			:disabled="!systemSet.payLimitType == 0" @change="switchChange(0)"/>
			</p>
			<p class="grid-integral" style="color: #000;margin-top: 10rpx;">温馨提示：</p>
			<p class="row_p">组织内所有员工发起企业订单采购时，均可使用员工个人支付密码进行支付，支付成功后系统扣除企业账户余额！</p>
		</view>
		</view>
		
		<!-- 限制支付额度 -->
		<view v-if="tabIndex == 2">
			<!-- 限制支付额度 -->
			<view class="flex-card">
			<p class="title_row">
			<span>限制支付额度</span>
			<switch color="#00a660" style="transform:scale(0.7)" :checked="systemSet.payLimitType == 1?true:false" 
				:disabled="!systemSet.payLimitType == 1" @change="switchChange(1)" />
			</p>
			<p class="grid-integral" style="color: #000;margin-top: 10rpx;">温馨提示：</p>
			<p class="row_p">1、低于或等于该额度的企业订单，组织内所有员工发起采购时，均可使用员工个人支付密码进行支付，支付成功后系统扣除企业账户余额！</p>
			<p class="row_p">2、高于该额度的企业订单，组织内所有员工发起采购时，需要由管理人员（如：法定代表人、账户管理员、公司财务）进行审批代支付！</p>
		   </view>
		    <view class="flex-card">
				单笔限额：<uni-easyinput v-model="systemSet.payLimitAmount" size="mini" maxlength="3" class="singleLimit" :clearable="false" @blur="singleLimit(systemSet)"></uni-easyinput>人民币
			</view>
		    <!-- 代支付人员 -->
		    <p class="title_row" style="margin:0 20rpx;">
			<span>代支付人员</span>
			<button size="mini" @click="add" class="addBtn"><i class="iconfont">&#xe647;</i>添加</button>
			</p>
			<!-- 人员列表 -->
			<view v-if="payStaffList != null">
			<view class="flex-card" v-for="item,index in payStaffList" :key="index">
				<p class="grid-integral">名称：{{item.name}}</p>
				<p class="grid-integral">手机号：{{item.mobile}}</p>
				<p class="grid-integral">职位：
				<span v-if="!!item.staffPost">{{ item.staffPost }}</span>
				<span v-else>--</span>
				</p>
				<p class="grid-integral">部门：{{item.deptName}}</p>
				<view class="title_row">
					<p class="grid-integral">角色：
					<span v-if="$store.getters.companyInfo.adminId == item.id && $store.getters.companyInfo.legalPersonId == item.id">
					法定代表人，企业管理员，{{ item.roleName.replace("普通员工", "") }}
					</span>
					<span v-else-if="$store.getters.companyInfo.legalPersonId == item.id">
					法定代表人，{{ item.roleName.replace("普通员工", "") }}
					</span>
					<span v-else-if="$store.getters.companyInfo.adminId == item.id">
					企业管理员，{{ item.roleName.replace("普通员工", "") }}
					</span>
					<span v-else>{{ item.roleName }}</span>
					</p>
					<button size="mini" class="delete_btn" @click="deleteByStaffId(item)"
					 v-if="$store.getters.companyInfo.legalPersonId != item.id && $store.getters.companyInfo.adminId != item.id">删除</button>
				</view>
				
			</view>
		</view>
		<luanqingEmpty :show="true" text="没有更多数据啦" v-else />
	  </view>
	  
	  <!-- 添加支付人员 -->
	<!--  <select-tree ref="tkitree" :defaultRange="checkedStaffData" :range="deptOptions" confirmColor="#00a660" :foldAll="true"
	  @confirm='treeConfrim' @cancel="treeCancel" :openRank="3" /> -->
	  <custom-tree-select mutiple dataLabel="label" :choseParent="false" placeholder="请选择支付人员" :listData="deptOptions" ref="tkitree"/>
	  
	</view>
</template>

<script>
	import swiperTabHead from "@/components/slideTab/slideTab"
	import {getCompanyInfo, update} from "@/api/ec/console/busiConfig/systemSet";
	import luanqingEmpty from '@/components/luanqing-empty/luanqing-empty';
	import {treeSelectAndStaff} from "@/api/ec/console/org/dept";
	import {addCompanyPayStaffById} from "@/api/ec/console/busiConfig/companyPayStaff";
	import {deleteByStaffId, listCompanyPayStaffForEc} from "@/api/ec/console/busiConfig/companyPayStaff";
	export default {
		components: {swiperTabHead,luanqingEmpty},
		data() {
			return {
			    // 已选人员数据
			    checkedStaffData: [],
			    // 已选人员id
			    checkedData: [],
				// 部门树数据
				deptOptions: undefined,
				systemSet:{}, //设置支付信息
				payStaffList: [], //支付人员列表
				tabList: [{
					title: '关闭支付额度'
				},{
					title: '不限支付额度'
				},{
					title: '限制支付额度'
				},],
				tabIndex: 0,
				// 查询参数
				queryParams: {
				  pageNum: 1,
				  pageSize: 10,
				},     
			}
		},
		onLoad() {
			this.getInfo();
			this.getTreeSelect(); //查询部门下拉树结构
		},
		methods: {
			/** 单笔限额 */
			singleLimit(item){
				if (item.payLimitType == 1 && (item.payLimitAmount == null || item.payLimitAmount == "")) {
				 this.$modal.msgError("请输入单笔限额数量！")
				   return;
				}
				const param = {
				    id: item.id,
				    payLimitType: item.payLimitType,
				    payLimitAmount: item.payLimitAmount
				  };
        this.$modal.loading();
				update(param).then(() => {
				  this.$modal.closeLoading();
				  this.$modal.msgSuccess("支付设置成功！");
				})         
			},
			/** 添加 */
			add(){
				this.listSelectPerson();
				this.$refs.tkitree.handleInput();
			},
		    // 确认选择代支付人
		    treeConfrim(data) {
		    if (this.checkedData.length == 0) {
		        this.$modal.msgError('请先选择要添加的成员');
		          return;
		        }else{
		           this.checkedData = []
		           data.forEach(item => {
					// 所选的支付人员id
		           	this.checkedData.push(item.id)
		           })
          this.$modal.loading();
		             addCompanyPayStaffById(this.checkedData).then(response => {
					 this.$modal.closeLoading();
					 this.getInfo();
					 setTimeout(()=>{
						 this.$modal.msgSuccess("修改成功！");
					 },300)
		           });		    		  
		        }    	
		    },
		    /** 取消选择代支付人 */
		    treeCancel(){
		    	this.checkedData = []
		    },
		    /** 查询已选人员 */
		    listSelectPerson() {
		      this.checkedStaffData = [];
		      this.checkedData = [];
		      for (let i = 0; i < this.payStaffList.length; i++) {
		        let item = this.payStaffList[i];
		        this.checkedData.push(item.id);
		        let dept = {id: item.id, label: item.name, mobile: item.mobile, mobileHide: item.mobileHide, checked: true};
				this.checkedStaffData.push(dept);
		      }
		    },	
		    /** 查询部门下拉树结构 */
		    getTreeSelect() {
		      let data = {isCertify: 1, status: 1}
		      treeSelectAndStaff(data).then(response => {
		        this.deptOptions = response.data;
		      });
		    },	
			/** 修改支付设置 */
			switchChange(payLimitType){
			   const param = {
			      id: this.systemSet.id,
			      payLimitType: payLimitType,
			      payLimitAmount: this.systemSet.payLimitAmount
			    };
			    update(param).then((res) => {
				  this.getInfo();
				  setTimeout(()=>{
					  this.$modal.msgSuccess(res.msg);
				  },300)
			    })      
			},
			/** 查询消息设置信息 */
			getInfo() {
        this.$modal.loading();
			  getCompanyInfo().then(response => {
				uni.hideLoading()
			    this.systemSet = response.data;
				if (this.systemSet.payLimitType != 0) {
				    this.companyPayStaffList();
				}
			  });
			},
			 /** 删除按钮操作 */
			deleteByStaffId(row) {
			  var that = this
			  uni.showModal({
			  	title: '系统提示',
			  	confirmColor:'#00a660',
			  	content: '您确认要删除该审核支付人员吗',
			  	success: function (res) {
			  		if (res.confirm) {
						const data = {staffId: row.id};
			  			deleteByStaffId(data).then(()=>{
						that.getInfo();
						setTimeout(()=>{
							that.$modal.msgSuccess("删除成功");
						},300)
			  	    })
			  		}
			  	 }
			  });
			},
			/** 查询企业角色列表 */
			companyPayStaffList() {
        this.$modal.loading();
			  listCompanyPayStaffForEc(this.queryParams).then(response => {
				uni.hideLoading()
			    this.payStaffList = response.rows;
			  });
			},
			/** 接受子组件传过来的值点击切换导航 */
			tabtap(index) {
				var _this = this
				_this.tabIndex = index;
				_this.getInfo();
			},
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .input-value{
		display: none;
	}
	// 单笔限额输入框
	.singleLimit{
		width:120rpx;
		padding:0 10rpx;
		display: inline-block;
	}
	::v-deep .uni-easyinput__content-input{height: 40rpx;}
	.row_p{
		text-indent: 2em;
		font-size: 24rpx;
		line-height: 40rpx;
		color: #555;
	}
	.delete_btn{
		background-color: #ffeded;
		color: #ff4949;
		margin-right: 0;
		height:50rpx;
		line-height: 50rpx;
	}
	.addBtn{
		margin-right: 0;
		background: #e6f6ef;
		color: $uni-color-primary;
		height:50rpx;
		padding: 0 40rpx;
		.iconfont{
			font-size: 22rpx;
			margin-right: 6rpx;
			vertical-align: top;
		}
	}
	.title_row{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.flex-card{
		background: #f2f2f2;
		padding:20rpx 30rpx;
		margin: 20rpx;
	}
	.pay_view{
		  padding: 20rpx 0 20rpx 20rpx;
		  background-color: #bde8bf;
		  display: flex;
		  justify-content: space-between;
		  color: #000;
		  span{
			  color: #505050;
			  font-size: 24rpx;
		  }
	}
	.swiper-tab ::v-deep .uni-scroll-view-content{
		display: flex;
		justify-content: space-between;
	}
	page{background-color: $uni-bg-color;}

</style>
